<template>
	<view class="smart-page-head">
		<view class="smart-page-head-title">navigator</view>
	</view>	
   <view class="uni-padding-wrap uni-common-mt">
	   <view style="height: 150rpx;background-color: aqua;margin: 5rpx;">
		   测试数据{{index}}
	   </view>
      <view class="navigator-group">
        <navigator url="/navigate/navigate?title=navigate" hover-class="navigator-hover">
          <button type="default" class="nav-btn" @click="goDetailPage('newpage')">跳转到新页面</button>
        </navigator>
        <navigator url="/redirect/redirect?title=redirect" open-type="redirect">
          <button type="default" class="nav-btn" @click="goDetailPage('current')">在当前页打开</button>
        </navigator>
        <navigator v-if="!hasLeftWin" url="/pages/tabBar/extUI/extUI" open-type="switchTab">
          <button type="default" class="nav-btn" @click="goDetailPage('label')">跳转tab页面</button>
        </navigator>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
       title:'navigator',
	   user:"huangmeijian",
	   uid:5555555,
	   list:[1,2,3]
      }
    },
	onLoad(option) { //oncreate
		console.log("navigator页面加载");
	},
	onShow() { //onStart
		console.log("navigator------onShow");
	},
	onReady() {
		console.log("navigator------onReady");
	},
	onHide() {
		console.log("navigator------onHide");
	},
	onUnload() {
		console.log("navigator------onUnload");
	},
	onPullDownRefresh() {//数据刷新
		console.log("navigator------onPullDownRefresh开始刷新");
		setTimeout(()=>{
			uni.stopPullDownRefresh();
			console.log("navigator刷新完成"){
			},2000)
		}
	onReachBottom() { //数据加载
		console.log("到底了");
		this.count=this.count+20;
	},
	methods: {
		goDetailPage(e) {
			if (typeof e === 'string') {
				uni.navigateTo({
					url: '/pages/components/' + e + '/' + e
				});
			} else {
				uni.navigateTo({
					url: e.url
				});
			}
		}
	},
	
  }
  </script>
  
  <style>
  .navigator-group {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-top: 30rpx;
  }
  .nav-btn {
    width: auto; /* 让按钮宽度由内容决定，缩小框框 */
    padding: 15rpx 30rpx; /* 调整内边距，缩小按钮大小 */
    border-radius: 4rpx;
  }
  </style>